@import 'common';

%headline {
    width: 94.4vw;
    height: 7.3333vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        img {
            width: 7.4667vw;
            height: 7.2vw;
            vertical-align: middle;
        }

        span {
            font-size: 4vw;
        }
    }

    .right {
        display: flex;

        align-items: center;

        img {
            width: 3.3333vw;
            height: 3.4667vw;
            vertical-align: middle;

        }

        span {
            font-size: 3.2vw;
        }
    }
}

.web {
   

    //头部
    header {
        

        img {
            width: 16.4vw;
            height: 16.4vw;
        }

        input {
            width: 35.4667vw;
            height: 6.8vw;
            border-radius: 4vw;
            background-color: #ffffff;
            border: solid .2667vw #ff9344;
            padding-left: 3vw;
            box-sizing: border-box;
            background: url(../img/index/search.png);
            background-repeat: no-repeat;

            background-position: 28vw .5333vw;
            background-size: 5vw 5vw;

            &::placeholder {
                font-size: 3.2vw;
                line-height: 6.1333vw;
                color: #7777;
            }


        }

        .select {
            width: 21.2vw;
            height: 7.4667vw;
            border: solid .2667vw #ff9344;
            appearance: none;
            background: url(../img/index/pull-down.png);
            background-repeat: no-repeat;
            background-position: 15vw 2vw;
            background-size: 4.2667vw 2.1333vw;
            padding-left: 2vw;
            box-sizing: border-box;
            position: relative;
        }
        ul{
            position: absolute;
            top: 60%;
            right: 10%;
            background-color: #ffffff;
            border: solid .2667vw #ff9344;
            opacity: 0;
            li{
                color: #ff9344;
            }
            &:hover{
                opacity: 1;
                
            }
        }

       
    }

    //内容
    main {
       

        img {
            height: 38.2667vw;
            position: relative;

            &::before {
                content: '';
                display: inline-block;
                //TODO
                width: 100vw;
                height: 1.6vw;
                background-color: #000000;
                //opacity: 0.49;
                position: absolute;
                top: 10px;

            }
        }

        //团购
        .groupbuy {
            width: 100%;
            height: 38.8vw;
            margin-top: 4.4vw;

            .headline {
                @extend %headline;
            }

            ul {
                width: 94.4vw;
                margin: 1.3333vw auto 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                li {
                    margin-top: 1.3333vw;

                    img {
                        width: 32.1333vw;
                        height: 12.5333vw;
                    }
                }
            }
        }

        //猜你喜欢
        .love {
            width: 100%;
            margin-top: 2.6667vw;

            .headline {
                @extend %headline;
            }

            ul {
                margin: 4.4vw auto 0;

                li {
                    margin-left: 2.1333vw;
                    display: flex;
                    margin-top: 4.4vw;
                    a{
                        width: 100%;
                        display: flex;
                        text-decoration: none;
                        color: #000000;
                        
                    }
                    img {
                        width: 28.1333vw;
                        height: 21.8667vw;
                    }

                    .txt {
                        width: 64.9333vw;
                        margin: 0 auto;

                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        h4 {
                            width: 100%;
                            font-size: 4vw;

                            span {
                                float: right;
                                font-size: 2.9333vw;
                                color: #494949;
                            }
                        }

                        p {
                            font-size: 2.9333vw;
                            color: #494949;

                            span {
                                float: right;
                                color: #494949;
                                font-size: 2.9333vw;
                            }

                            &:last-child {
                                color: #ff9344;
                                font-size: 4.2667vw;
                            }
                        }
                    }
                }
            }
        }
    }

}